import { createFilterColumns, createTableRequestParams } from '@/utils/table';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { PageContainer, ProTable } from '@ant-design/pro-components';
import { Button, Image } from 'antd';
import { useMemo, useRef, useState } from 'react';
import api from './request';
function OrderGroupList() {
  const actionRef = useRef<ActionType>();

  const [filterList, setFilterList] = useState<Requestor.FilterResponse[]>([]);
  // const [list, setList] = useState<any[]>([
  //   {
  //     orderNo: 'orderNo1',
  //     orderItemDatas: [
  //       {
  //         goodsName: 'goodsName1',
  //         skuname: 'skuname1',
  //       },
  //     ],
  //   },
  //   {
  //     orderNo: 'orderNo2',
  //     orderItemDatas: [
  //       {
  //         goodsName: 'goodsName2',
  //         skuname: 'skuname2',
  //       },
  //       {
  //         goodsName: 'goodsName2',
  //         skuname: 'skuname2',
  //       },
  //     ],
  //   },
  //   {
  //     orderNo: 'orderNo3',
  //     orderItemDatas: [
  //       {
  //         goodsName: 'goodsName3',
  //         skuname: 'skuname23',
  //       },
  //       {
  //         goodsName: 'goodsName3',
  //         skuname: 'skuname23',
  //       },
  //       {
  //         goodsName: 'goodsName3',
  //         skuname: 'skuname23',
  //       },
  //     ],
  //   },
  // ]);

  // request
  const getFilterList = async () => {
    // const filterList = await api.getFilterList();
    const filterList: Requestor.FilterResponse[] = [];
    setFilterList(filterList);
    return filterList;
  };
  const getListRequest = (
    params: Requestor.TableParams,
    filterList: Requestor.FilterResponse[],
  ) => {
    const requestParams = createTableRequestParams(params, filterList);
    return api.getList({ ...requestParams, sortField: 'orderTime' });
  };
  const getList = async (params: Requestor.TableParams) => {
    if (!filterList || !filterList.length) {
      const filterList = await getFilterList();
      return getListRequest(params, filterList);
    } else {
      return getListRequest(params, filterList);
    }
  };

  const columns = useMemo(() => {
    const filterColumns = createFilterColumns<OrderGroupListApi.TableItemInfo>(filterList);
    const tableColumns: ProColumns<OrderGroupListApi.TableItemInfo>[] = [
      {
        title: '订单号',
        dataIndex: 'orderNo',
        ellipsis: true,
        hideInSearch: true,
        align: 'center',
        onCell: (data) => (data.rowSpan ? { rowSpan: data.rowSpan } : { rowSpan: 0 }),
      },
      {
        title: '手机号码',
        dataIndex: 'userPhone',
        ellipsis: true,
        hideInSearch: true,
        align: 'center',
        onCell: (data) => (data.rowSpan ? { rowSpan: data.rowSpan } : { rowSpan: 0 }),
      },
      {
        title: '订单状态',
        dataIndex: 'orderStatus',
        hideInSearch: true,
        ellipsis: true,
        align: 'center',
        onCell: (data) => (data.rowSpan ? { rowSpan: data.rowSpan } : { rowSpan: 0 }),
      },
      {
        title: '支付状态',
        dataIndex: 'paymentStatus',
        hideInSearch: true,
        ellipsis: true,
        align: 'center',
        onCell: (data) => (data.rowSpan ? { rowSpan: data.rowSpan } : { rowSpan: 0 }),
      },
      // {
      //   title: '支付方式',
      //   dataIndex: 'paymentMethod',
      //   hideInSearch: true,
      //   ellipsis: true,
      //   align: 'center',
      //   onCell: (data) => (data.rowSpan ? { rowSpan: data.rowSpan } : { rowSpan: 0 }),
      // },
      // {
      //   title: '数量',
      //   dataIndex: 'sumQuantity',
      //   hideInSearch: true,
      //   ellipsis: true,
      //   align: 'center',
      //   onCell: (data) => (data.rowSpan ? { rowSpan: data.rowSpan } : { rowSpan: 0 }),
      // },
      {
        title: '订单时间',
        dataIndex: 'orderTime',
        ellipsis: true,
        hideInSearch: true,
        align: 'center',
        onCell: (data) => (data.rowSpan ? { rowSpan: data.rowSpan } : { rowSpan: 0 }),
      },
      // {
      //   title: '优惠金额',
      //   dataIndex: 'discountAmount',
      //   ellipsis: true,
      //   hideInSearch: true,
      //   align: 'center',
      //   onCell: (data) => (data.rowSpan ? { rowSpan: data.rowSpan } : { rowSpan: 0 }),
      // },
      {
        title: '实际金额',
        dataIndex: 'actualAmount',
        ellipsis: true,
        hideInSearch: true,
        align: 'center',
        onCell: (data) => (data.rowSpan ? { rowSpan: data.rowSpan } : { rowSpan: 0 }),
      },
      {
        title: '积分',
        dataIndex: 'points',
        ellipsis: true,
        hideInSearch: true,
        align: 'center',
        onCell: (data) => (data.rowSpan ? { rowSpan: data.rowSpan } : { rowSpan: 0 }),
      },
      // {
      //   title: '预约时间',
      //   dataIndex: 'reservationTime',
      //   ellipsis: true,
      //   hideInSearch: true,
      //   align: 'center',
      //   onCell: (data) => (data.rowSpan ? { rowSpan: data.rowSpan } : { rowSpan: 0 }),
      // },
      {
        title: '商品图片',
        dataIndex: 'propertyIcon',
        ellipsis: true,
        hideInSearch: true,
        align: 'center',
        render(_, data) {
          return <Image width={120} src={data.propertyIcon} />;
        },
      },
      {
        title: '商品名称',
        dataIndex: 'goodsName',
        ellipsis: true,
        hideInSearch: true,
        align: 'center',
      },
      // {
      //   title: '规格名称',
      //   dataIndex: 'skuname',
      //   ellipsis: true,
      //   hideInSearch: true,
      //   align: 'center',
      // },
      {
        title: '数量',
        dataIndex: 'quantity',
        ellipsis: true,
        hideInSearch: true,
        align: 'center',
      },
    ];
    return filterColumns.concat(tableColumns);
  }, [filterList]);

  return (
    <PageContainer>
      <ProTable
        bordered
        size="small"
        rowKey="id"
        options={false}
        actionRef={actionRef}
        toolBarRender={() => []}
        search={{
          optionRender: () => {
            return [
              <Button key="search" type="primary" onClick={() => actionRef.current?.reload()}>
                查询
              </Button>,
            ];
          },
        }}
        columns={columns}
        request={getList}
      />
    </PageContainer>
  );
}

export default OrderGroupList;
